<template>
    <el-date-picker
        v-model="form[formId]"
        type="daterange"
        align="right"
        unlink-panels
        :range-separator="$t('m.placeholder.datePicker.rangeSeparator')"
        :start-placeholder="$t('m.placeholder.datePicker.startPlaceholder')"
        :end-placeholder="$t('m.placeholder.datePicker.endPlaceholder')"
        :size="size"
        @change="time"
        :format="format"
        :value-format="valueformat"
        :picker-options="pickerOptions"
        clearable
    ></el-date-picker>
</template>
<script>
const ERR_OK = 200;
export default {
    props: {
        form: Object,
        formId: String,
        startTime: String,
        endTime: String,
        size: String,
        format: String,
        valueformat: String
    },
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: this.$t('m.placeholder.datePicker.week'),
                        onClick(picker) {
                            const end = new Date(
                                new Date().toLocaleDateString()
                            );
                            const start = new Date(
                                new Date().toLocaleDateString()
                            );
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: this.$t('m.placeholder.datePicker.month'),
                        onClick(picker) {
                            const end = new Date(
                                new Date().toLocaleDateString()
                            );
                            const start = new Date(
                                new Date().toLocaleDateString()
                            );
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }, 
                    {
                        text: this.$t('m.placeholder.datePicker.ThreeMonths'),
                        onClick(picker) {
                            const end = new Date(
                                new Date().toLocaleDateString()
                            );
                            const start = new Date(
                                new Date().toLocaleDateString()
                            );
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            }
        };
    },
    methods: {
        time(val) {
            if (this.startTime && this.endTime) {
                if (val) {
                    this.form[this.startTime] = val[0];
                    this.form[this.endTime] = val[1];
                } else {
                    this.form[this.startTime] = "";
                    this.form[this.endTime] = "";
                }
            }
        }
    }
};
</script>